<template>
  <div class="device-manage">
    <!-- <van-nav-bar title="添加管理" left-text="返回" right-text="按钮" @click-left="sanQRCode" @click-right="addDevice">
      <van-icon name="qr" slot="left" size="1.4em" />
      <van-icon name="add" slot="right" size="1.4em" />
    </van-nav-bar> -->
    <!-- <van-list v-model="loading" :finished="finished" :immediate-check="false" :offset="100">
      <van-swipe-cell :right-width="delWidth" :on-close="onClose" v-for="(item, index) in items" :key="index">
        <van-cell-group :border="true">
          <van-cell class="shop-item" is-link :to="{ path: 'shopInfo',name:'shopInfo', query: item}">
            <div class="shopName">
              <van-icon name="shop2" />&nbsp{{ item.name }}</div>
            <div>{{ item.managerName }}，{{ item.managerMobile }}</div>
            <div class="addr">{{ item.addr }}</div>
          </van-cell>
        </van-cell-group>
        <van-button slot="right" class="van-swipe-cell__right" :style="{'width':delWidth+'px'}" tag="div">
          删除
        </van-button>
      </van-swipe-cell>

    </van-list> -->
      <van-cell-group :border="true">
          <van-cell class="shop-item" is-link :to="{ path: 'shopInfo',name:'shopInfo', query: item}" v-for="(item, index) in items" :key="index">
            <div class="shopName">
              <van-icon name="shop2" />&nbsp{{ item.name }}</div>
            <div>{{ item.managerName }}，{{ item.managerMobile }}</div>
            <div class="addr">{{ item.addr }}</div>
          </van-cell>
        </van-cell-group>

    <is-empty v-if="isEmpty">暂无商铺</is-empty>

    <transition name="fade">
      <van-icon name="back-top" class="backTop" @click.native="backTop" v-show="showArrow" />
    </transition>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getShopList } from "./../../api/shop";
import scrollFixed from "@/mixin/scroll-fixed";
import IsEmpty from "@/components/is-empty/";
import { throttle } from "@/libs/util";
export default {
  mixins: [scrollFixed],
  data() {
    return {
      showArrow: false,
      items: []
    };
  },
  computed: {
    ...mapState({
      // 箭头函数可使代码更简练
      wxName: state => state.user.wxName,
      mobile: state => state.user.mobile
    }),
    delWidth() {
      return window.innerWidth * 0.2;
    }
  },
  watch: {},
  created() {
    this.initData();
    this.scrollShowArrow = throttle(this.scrollShowArrow, 100);
  },
  activated() {
    this.eventListen(true);
  },

  deactivated() {
    this.eventListen(false);
  },

  methods: {
    addDevice() {
      this.$router.push("/add-device");
    },

    async deleteDeivice(IMEI) {
      let res = await delDevice({ imei: IMEI });
      if (res.code === 0) {
        this.resetInit();
      } else {
        this.$toast.fail(res.msg);
      }
    },
    async initData() {
      let res = await getShopList({});
      if (res.code === 0) {
        this.items = res.data;
      } else {
        this.$toast.fail(res.msg);
      }
    },
    eventListen(isBind = true) {
      if (isBind) {
        this.$el.addEventListener("scroll", this.scrollShowArrow);
      } else {
        this.$el.removeEventListener("scroll", this.scrollShowArrow);
      }
    },
    scrollShowArrow() {
      this.showArrow = this.$el.scrollTop > 120;
    },
    backTop() {
      this.$el.scrollTop = 0;
    }
  },

  components: {
    IsEmpty
  }
};
</script>


<style lang="scss" scoped>
@import "./../../../../assets/scss/mixin";
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}
.backTop {
  position: fixed;
  right: 20px;
  bottom: 80px;
  font-size: 24px;
}
.device-manage {
  overflow: auto;
  height: 100%;
}

.van-swipe-cell {
  &__left,
  &__right {
    color: #ffffff;
    font-size: 14px;
    height: 100%;
    display: inline-block;
    text-align: center;
    display: flex;
    align-items: center; /*垂直居中*/
    justify-content: center; /*水平居中*/
    background-color: #f44;
  }
}
.van-button__text {
  width: 100%;
}
.shop-item {
  padding: 15px;
  .shopName {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 5px;
     display: flex;
    align-items:center;
  }
  .addr {
    font-size: 12px;
    line-height: 16px;
    color: #666;
  }
}
</style>
